<template>
  <div class="panel">
    <div class="heading">
      <h2>图形申购</h2>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><a href="#/app">后台首页</a></el-breadcrumb-item>
        <el-breadcrumb-item
          ><a href="#/app/purchasing">订单管理</a></el-breadcrumb-item
        >
        <el-breadcrumb-item>图形申购</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="list">
      <div
        style="border: 1px solid #cccccc; margin-top: 10px"
        class="tradeName"
      >
        <div class="category">商品类别</div>
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
          style="
            padding-top: 0px;
            height: 695px;
            width: 170px;
            overflow-y: auto;
            overflow-x: hidden;
          "
        ></el-tree>
      </div>
      <div class="product">
        <div style="background-color: #bcd2ef; padding: 5px 3px 4px 5px">
          产品列表
        </div>
        <div style="margin: 10px">
          <el-input
            v-model="input"
            placeholder="请输入内容"
            style="width: 272px"
          ></el-input>
          <el-button type="info">搜索</el-button>
          <el-button type="success">已选购产品</el-button>
          <el-button type="danger">手机端下单</el-button>
        </div>
        <div class="content">
          <!-- <el-tree
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
          ></el-tree> -->
          <ul>
            <li>
              <el-button @click="dialogVisible = true" type="text">
                <img src="../assets/images/tupian/灰白印象.jpg" alt="" />
                <p>
                  <a href="javaScript:void(0);"
                    >YT-T501A 3筒灯照明159*954 159*945</a
                  >
                </p>
              </el-button>
              <p>￥ <span>185.00</span></p>
            </li>

            <li>
              <img src="../assets/images/tupian/极简主义.jpg" alt="" />
              <p><a href="javaScript:void(0);">LS900B 极简主义954*954</a></p>
              <p>￥ <span>128.00</span></p>
            </li>
            <li>
              <img src="../assets/images/tupian/岁月.png" alt="" />
              <p><a href="javaScript:void(0);">PM7002 岁月477*477</a></p>
              <p>￥ <span>44.10</span></p>
            </li>
            <li>
              <img src="../assets/images/tupian/淳朴.png" alt="" />
              <p><a href="javaScript:void(0);">PM7006 淳朴477*477</a></p>
              <p>￥ <span>40.00</span></p>
            </li>
            <li>
              <img src="../assets/images/tupian/回型自然雅纹.jpg" alt="" />
              <p>
                <a href="javaScript:void(0);">H7010_回型 自然雅纹477*477</a>
              </p>
              <p>￥ <span>26.90</span></p>
            </li>
            <li>
              <img src="../assets/images/tupian/O型花语恋曲.jpg" alt="" />
              <p><a href="javaScript:void(0);">H7009_O型 花语恋曲477*477</a></p>
              <p>￥ <span>25.90</span></p>
            </li>
            <li>
              <img src="../assets/images/tupian/圆形花语恋曲.jpg" alt="" />
              <p>
                <a href="javaScript:void(0);">H7009_圆型 花语恋曲477*477</a>
              </p>
              <p>￥ <span>25.90</span></p>
            </li>
            <li>
              <img src="../assets/images/tupian/美撼凡尘.png" alt="" />
              <p><a href="javaScript:void(0);">LS7007B 美撼凡尘477*477</a></p>
              <p>￥ <span>58.80</span></p>
            </li>
            <li>
              <img src="../assets/images/tupian/金花板.png" alt="" />
              <p>
                <a href="javaScript:void(0);">OS771A_金花板 OS771A_金花板</a>
              </p>
              <p>￥ <span>256.00</span></p>
            </li>
            <li>
              <img src="../assets/images/tupian/阿维尼翁.png" alt="" />
              <p><a href="javaScript:void(0);">LS7007C 阿维尼翁477*477</a></p>
              <p>￥ <span>58.80</span></p>
            </li>
            <li>
              <img src="../assets/images/tupian/辉煌.png" alt="" />
              <p><a href="javaScript:void(0);">PM7005 辉煌477*477</a></p>
              <p>￥ <span>52.50</span></p>
            </li>
            <li>
              <img src="../assets/images/tupian/悦梁花结.png" alt="" />
              <p>
                <a href="javaScript:void(0);">PSYL-2D 悦梁花结（3）159*159</a>
              </p>
              <p>￥ <span>31.50</span></p>
            </li>
            <li>
              <img src="../assets/images/tupian/悦梁3.png" alt="" />
              <p><a href="javaScript:void(0);">PSYL-1D 悦梁（3）159*954</a></p>
              <p>￥ <span>132.30</span></p>
            </li>
            <li>
              <img src="../assets/images/tupian/甲地星罗.png" alt="" />
              <p><a href="javaScript:void(0);">ZS900A 甲地星罗954*954</a></p>
              <p>￥ <span>552.30</span></p>
            </li>
            <li>
              <img src="../assets/images/tupian/普雷斯顿.png" alt="" />
              <p><a href="javaScript:void(0);">OS900A 普雷斯顿954*954</a></p>
              <p>￥ <span>556.50</span></p>
            </li>
            <li>
              <img src="../assets/images/tupian/DC7002.png" alt="" />
              <p><a href="javaScript:void(0);">BS771A_DC7002477*477</a></p>
              <p>￥ <span>150.00</span></p>
            </li>
            <li>
              <img src="../assets/images/tupian/换气扇.png" alt="" />
              <p><a href="javaScript:void(0);">JF318B 换气扇318*318</a></p>
              <p>￥ <span>149.00</span></p>
            </li>
            <li>
              <img src="../assets/images/tupian/3CLED灯.png" alt="" />
              <p><a href="javaScript:void(0);">QD318-3C LED灯318*318</a></p>
              <p>￥ <span>198.00</span></p>
            </li>
            <li>
              <img src="../assets/images/tupian/古铜色组合模块.png" alt="" />
              <p>
                <a href="javaScript:void(0);"
                  >YD7001B 古铜色组合模块YD-7001B-1/2/3各4片</a
                >
              </p>
              <p>￥ <span>391.65</span></p>
            </li>
            <li>
              <img src="../assets/images/tupian/金色组合模块.jpg" alt="" />
              <p>
                <a href="javaScript:void(0);"
                  >YD7001C 金色组合模块YD-7001C-1/2/3各4片</a
                >
              </p>
              <p>￥ <span>185.00</span></p>
            </li>
          </ul>

          <el-dialog
            :visible.sync="dialogVisible"
            width="1700px"
            :close-on-click-modal="false"
          >
            <div class="cart">
              <div class="photoTable">
                <div class="photo">
                  <div>
                    <img src="../assets/images/tupian/灰白印象.jpg" alt="" />
                    <p style="margin-bottom: 15px">
                      YT-T501A 3筒灯照明159*954 159*945
                    </p>
                    <p style="margin-bottom: 15px; color: red">
                      ￥ <span>185.00</span>
                    </p>
                    <p style="margin-bottom: 15px">装箱规格：8.00片/箱</p>
                    <template>
                      <el-button type="primary" align="center"
                        >加入购物车</el-button
                      >
                    </template>
                  </div>
                </div>
                <div class="table">
                  <el-table
                    :data="tableData"
                    border
                    type="index"
                    height="500"
                    :summary-method="getSummaries"
                    show-summary
                    style="width: 100%; margin-top: 20px"
                  >
                    <el-table-column type="index" label="序号" width="50">
                    </el-table-column>
                    <el-table-column
                      prop="modelName"
                      label="型号名称"
                      :show-overflow-tooltip="true"
                      width="220"
                    >
                    </el-table-column>
                    <el-table-column prop="specs" label="规格" width="100">
                    </el-table-column>
                    <el-table-column prop="length" label="长度(mm)" width="90">
                    </el-table-column>
                    <el-table-column
                      prop="packSpecs"
                      label="装箱规格"
                      width="100"
                    >
                    </el-table-column>
                    <el-table-column prop="number" label="数量" width="180">
                      <template slot-scope="scope">
                        <el-input-number
                          v-model="scope.row.number"
                          size="mini"
                          @change="
                            updateItem(scope.row.number, scope.row.remarks)
                          "
                          :min="0"
                          label="数量"
                        ></el-input-number
                      ></template>
                    </el-table-column>
                    <el-table-column prop="price" label="单价">
                    </el-table-column>
                    <el-table-column prop="amount" label="金额" width="120">
                    </el-table-column>
                    <el-table-column prop="quantity" label="起订量">
                    </el-table-column>
                    <el-table-column prop="remarks" label="备注" width="120">
                      <template slot-scope="scope">
                        <el-input
                          v-model="scope.row.remarks"
                          @change="
                            updateItem(scope.row.number, scope.row.remarks)
                          "
                        ></el-input
                      ></template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="message" style="padding: 15px">
                  <p style="margin-bottom: 30px">商品总额：13763.25</p>
                  <p style="margin-bottom: 30px">立减：1158元</p>
                  <p style="margin-bottom: 30px">优惠券：1158元</p>
                  <p style="margin-bottom: 30px">本单实付：10119.58元</p>
                  <el-button
                    type="primary"
                    style="margin-left: 25px"
                    align="center"
                    >提交订单</el-button
                  >
                </div>
              </div>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped  lang="less">
.list {
  display: flex;
  height: 740px;
}
/* el-submenu {
  max-width: 140px !important;
}
.el-submenu .el-menu-item {
  min-width: 140px !important;
  max-width: 140px !important;
} */
.category {
  padding: 5px 3px 4px 5px;
  z-index: 9999;
  width: 170px;
  background-color: #bcd2ef;
}
.product {
  flex-grow: 1;
  border: 1px solid #cccccc;
  margin-top: 10px;
  margin-left: 5px;
}
.content {
  width: 100%;
  height: 87%;
  overflow-y: auto;

  ul {
    margin-left: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  ul li {
    width: 212px;
    height: 300px;
    box-sizing: border-box;
    margin: 10px 20px;

    img {
      width: 100%;
      height: 212px;
      border: 1px solid #999999;
    }
    p {
      font-size: 12px;
      margin-bottom: 20px;
      width: 212px;
      span {
        color: rgb(255, 41, 0);
        font-size: 18px;
      }
    }
  }
}
.content ul li p:nth-child(2) {
  font-size: 12px;
  a {
    color: blue;
    text-decoration: underline;
  }
}
.content ul li p:nth-child(3) {
  font-size: 18px;
}
.cart {
  display: flex;
  flex-direction: column;
}
.photoTable {
  display: flex;
  flex-direction: row;
}
.table {
  margin-left: 25px;
  margin-right: 25px;
}
.message {
  border: 1px solid #cccccc;
}
</style>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          modelName: "YS1901A-5(梦幻沉浮(砂纹黑封边条平缝） )",
          specs: "954*1431",
          length: "",
          packSpecs: "6.00片/箱",
          number: 12,
          price: 176.11,
          amount: 2113.32,
          quantity: 0,
          remarks: "",
        },
        {
          modelName: "YS1901A-5(梦幻沉浮(砂纹黑封边条平缝） )",
          specs: "954*1431",
          length: "",
          packSpecs: "6.00片/箱",
          number: 12,
          price: 176.11,
          amount: 2113.32,
          quantity: 0,
          remarks: "",
        },
        {
          modelName: "YS1901A-5(梦幻沉浮(砂纹黑封边条平缝） )",
          specs: "954*1431",
          length: "",
          packSpecs: "6.00片/箱",
          number: 12,
          price: 176.11,
          amount: 2113.32,
          quantity: 0,
          remarks: "",
        },
        {
          modelName: "YS1901A-5(梦幻沉浮(砂纹黑封边条平缝） )",
          specs: "954*1431",
          length: "",
          packSpecs: "6.00片/箱",
          number: 12,
          price: 176.11,
          amount: 2113.32,
          quantity: 0,
          remarks: "",
        },
        {
          modelName: "YS1901A-5(梦幻沉浮(砂纹黑封边条平缝） )",
          specs: "954*1431",
          length: "",
          packSpecs: "6.00片/箱",
          number: 12,
          price: 176.11,
          amount: 2113.32,
          quantity: 0,
          remarks: "",
        },
        {
          modelName: "YS1901A-5(梦幻沉浮(砂纹黑封边条平缝） )",
          specs: "954*1431",
          length: "",
          packSpecs: "6.00片/箱",
          number: 12,
          price: 176.11,
          amount: 2113.32,
          quantity: 0,
          remarks: "",
        },
        {
          modelName: "YS1901A-5(梦幻沉浮(砂纹黑封边条平缝） )",
          specs: "954*1431",
          length: "",
          packSpecs: "6.00片/箱",
          number: 12,
          price: 176.11,
          amount: 2113.32,
          quantity: 0,
          remarks: "",
        },
        {
          modelName: "YS1901A-5(梦幻沉浮(砂纹黑封边条平缝） )",
          specs: "954*1431",
          length: "",
          packSpecs: "6.00片/箱",
          number: 12,
          price: 176.11,
          amount: 2113.32,
          quantity: 0,
          remarks: "",
        },
        {
          modelName: "YS1901A-5(梦幻沉浮(砂纹黑封边条平缝） )",
          specs: "954*1431",
          length: "",
          packSpecs: "6.00片/箱",
          number: 12,
          price: 176.11,
          amount: 2113.32,
          quantity: 0,
          remarks: "",
        },
      ],
      input: "",
      dialogVisible: false,
      data: [
        {
          label: "模块",
          children: [
            {
              label: "318厨卫",
            },
            {
              label: "477品尚",
            },
            {
              label: "大板悦尚",
            },
          ],
        },
        {
          label: "电器",
          children: [
            {
              label: "厨卫电器",
            },
            {
              label: "品尚电器",
            },
            {
              label: "悦尚电器",
            },
            {
              label: "晾衣架",
            },
          ],
        },
        {
          label: "墙面",
          children: [
            {
              label: "德尚铂晶板系列",
            },
            {
              label: "德尚铂森板系列",
            },
            {
              label: "德尚铂陶板系列",
            },
            {
              label: "墙面长城板系列",
            },
            {
              label: "墙面灯带线条系列",
            },
            {
              label: "墙面模块系列",
            },
            {
              label: "墙面线条系列",
            },
            {
              label: "喷绘",
            },
          ],
        },
        {
          label: "龙骨角线梁",
          children: [
            {
              label: "龙骨系列",
            },
            {
              label: "厨卫边角线",
            },
            {
              label: "品尚边角线",
            },
            {
              label: "悦尚边角线",
            },
            {
              label: "品尚尚层空间",
            },
            {
              label: "悦尚尚层空间",
            },
            {
              label: "318尚层空间",
            },
          ],
        },
        {
          label: "工程",
          children: [
            {
              label: "工程模块",
            },
            {
              label: "工程电器",
            },
            {
              label: "工程角线",
            },
            {
              label: "工程龙骨",
            },
            {
              label: "工程墙板系列",
            },
            {
              label: "工程配件",
            },
          ],
        },
        {
          label: "辅料配件",
          children: [
            {
              label: "电器配件",
            },
            {
              label: "型材配件",
            },
            {
              label: "墙面配件",
            },
            {
              label: "龙骨配件",
            },
            {
              label: "装饰辅料",
            },
          ],
        },
        {
          label: "营销物料",
          children: [
            {
              label: "软装家具",
            },
            {
              label: "门店道具",
            },
            {
              label: "礼品",
            },
            {
              label: "样品",
            },
            {
              label: "宣传资料",
            },
          ],
        },
        {
          label: "智能产品",
          children: [
            {
              label: "门锁",
            },
            {
              label: "窗帘",
            },
            {
              label: "电器",
            },
            {
              label: "开关",
            },
            {
              label: "其他",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    handleChange(value) {
      console.log(value);
    },
    getSummaries(param) {
      console.info(param);
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[5] += " ";
          sums[7] += " ";
          sums[7] = Math.floor(sums[7] * 100) / 100;
        } else {
        }
        sums[1] = " ";
        sums[2] = " ";
        sums[3] = " ";
        sums[4] = " ";
        sums[6] = " ";
        sums[8] = " ";
        sums[9] = " ";
      });
      return sums;
    },
    updateItem(number, remarks) {
      this.tableData.find((a) => {
        if (a.number == number) {
          a.amount = a.number * a.price;
          a.amount = Math.floor(a.amount * 100) / 100;
        }
      });
    },
  },
};
</script>

